<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getbASECInfoAPI } from '@/api/search/index'
import { assignObject } from '@/utils/object'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  id: { type: String, required: true }
})

const baseInfo = reactive({
  microstep: '',
  vulnerability: [],
  type: '',
  platform: '',
  way: '',
  desc: ''
})

const isHidden = ref(false)

const change = () => {
  isHidden.value = !isHidden.value
}
const getInfo = (id: string) => {
  getbASECInfoAPI(id).then((res) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(baseInfo, data)
    }
  })
}

onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div class="item">
    <div class="label">漏洞编号：</div>
    <div class="content">{{ baseInfo.vulnerability.join(' | ') }}</div>
  </div>
  <div class="item">
    <div class="label">漏洞类型：</div>
    <div class="content">{{ baseInfo.type }}</div>
  </div>
  <div class="item">
    <div class="label">漏洞厂商：</div>
    <div class="content">{{ baseInfo.platform }}</div>
  </div>
  <!-- <div class="item">
    <div class="label">利用方式：</div>
    <div class="content">{{ baseInfo.way }}</div>
  </div> -->
  <div class="item">
    <div class="label">漏洞描述：</div>
    <div class="contnet">
      <div class="description" :class="{ 'is-hidden': isHidden }">
        {{ baseInfo.desc }}
      </div>
      <jm-button link type="primary" :icon="isHidden ? ArrowUp : ArrowDown" @click="change">
        {{ isHidden ? '收起' : '展开' }}
      </jm-button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.item {
  padding: 0.625rem 1.25rem;
  display: flex;
  font-size: 0.875rem;
  color: var(--el-text-color-regular);

  .label {
    width: 6.25rem;
    flex-shrink: 0;
  }
  .description {
    height: 2.5rem;
    overflow: hidden;
    &.is-hidden {
      height: auto;
    }
  }
}
</style>
